<template>
    <view class="live-page">
        <!-- 1. 直播标题 -->
        <view class="live-title">
            <text class="title-text">🔴{{ liveDetail.title }}直播间</text>
        </view>
        <!-- 2. 直播视频 -->
        <view class="video-box">
            <image class="videoImg" :src="IMG_API + liveDetail.coverUri" mode="scaleToFill" />
            <!-- <hls-player :src="hlsURL" :live="true" /> -->
            <!-- <video ref="video" class="live-video" is-live :src="video.hls" controls autoplay muted
                playsinline /> -->
            <!-- 播放按钮，假的 -->
            <view v-if="liveDetail.live === true" class="play-btn" @click="togglePlay">
                <text>进入直播</text>
            </view>
            <view v-else class="play-btn" @click="unStart">
                <text>直播未开始</text>
            </view>
        </view>

        <!-- 3. 直播信息 -->
        <view class="live-info">
            <!-- <view class="info-row">
                <text class="info-label">教师</text>
                <image class="face" :src="liveDetail.teacherHeadPortraitUri" />
                <text class="info-value">{{ liveDetail.teacher_name }}</text>
            </view> -->
            <view class="info-row">
                <text class="info-label">学校</text>
                <!-- <text class="info-value">{{ liveDetail.schoolName }}</text> -->
                <text class="info-value">{{ '云南师范大学附属中学' }}</text>
            </view>
            <view class="info-row">
                <text class="info-label">时间</text>
                <text class="info-value">{{ liveDetail.startTime }}&nbsp;&mdash;&nbsp;{{ liveDetail.endTime }}</text>
            </view>
            <!-- <view class="info-row">
                <text class="info-label">班级</text>
                <text class="info-value">{{ liveDetail.recordEquipmentName }}</text>
            </view> -->
            <!-- <view class="info-row">
                <text class="info-label">观看</text>
                <text class="info-value">1.2k 人正在看</text>
            </view> -->
            <view class="info-row desc">
                <text class="info-label">简介</text>
                <text class="info-value">这是{{ liveDetail.title }}直播间，欢迎大家互动提问~</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import uniReq from '@/api/uniReq';
import { onLoad } from '@dcloudio/uni-app'
import Hls from 'hls.js'
import hlsPlayer from '@/components/hlsPlayer/hlsPlayer.vue'
import { IMG_API } from '@/utils/auth'


const hlsURL = ref('')// 直播视频URL

const togglePlay = () => {
    console.log('hlsURL', hlsURL.value);
    if (hlsURL.value) {
        window.location.href = hlsURL.value
    }
}
const unStart = () => {
    uni.showModal({
        title: '提示',
        content: '直播未开始，是否前往直播列表？',
        success: (res) => {
            if (res.confirm) {
                uni.navigateBack({
                    delta: 1
                })
            }
        }
    })
}

const videoErrorCallback = (e) => {
    console.log('视频播放错误', e);
    uni.showToast({
        title: '视频加载错误',
        icon: 'none'
    })
}

const liveDetail = ref({});
const video = ref({});
const getLiveDetail = async (id) => {
    try {
        const res = await uniReq({
            url: '/v3/live/itemForThirdParty',
            method: 'GET',
            data: {
                id: id
            }
        })
        if (res.code === 0) {
            liveDetail.value = res.data
            // hlsURL.value = res.data.playUrl
            console.log('直播详情', liveDetail.value);
        } else {
            uni.showToast({
                title: res.message,
                icon: 'none'
            })
        }
    } catch (error) {
        uni.showToast({
            title: error,
            icon: 'none'
        })
    }
}

const getFLVUrl = async (id) => {
    try {
        const res = await uniReq({
            url: '/v3/live/liveStreamWithTicket',
            method: 'GET',
            data: {
                id: id
            }
        })
        if (res.code === 0) {
            video.value = res.data
            hlsURL.value = res.data.hls
            console.log(hlsURL.value);
        } else {
            uni.showToast({
                title: res.message,
                icon: 'none'
            })
        }
    } catch (error) {
        console.error(error);
        uni.showToast({
            title: error,
            icon: 'none'
        })
    }
}

onLoad((options) => {
    const id = options.id
    console.log(id);
    getLiveDetail(id);
    getFLVUrl(id);
})


</script>

<style lang="scss" scoped>
.live-page {
    display: flex;
    flex-direction: column;
    // height: 100vh;
    background: linear-gradient(to left, #e0eeff, #ffffff);
}

.live-title {
    padding: 30rpx;

    .title-text {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
    }
}

/* 2. 视频区域：按屏幕宽度 9:16 竖屏 */
.video-box {
    width: 100%;
    position: relative;
    padding-bottom: 177.78%;
    /* 9/16 = 0.5625 → 竖屏 16:9 反过来 1.7778 */
    background: #000;

    .videoImg {
        position: absolute;
        left: 0;
        top: 35%;
        width: 100%;
        height: 400rpx;
    }
}

.live-video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* 3. 信息卡片 */
.live-info {
    flex: 1;
    padding: 30rpx;

    .info-row {
        display: flex;
        margin-bottom: 20rpx;

        &.desc {
            align-items: flex-start;
        }
    }

    .info-label {
        width: 120rpx;
        font-size: 28rpx;
        color: #999;
    }

    .face {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        margin-right: 8rpx;
    }

    .info-value {
        flex: 1;
        font-size: 28rpx;
        color: #333;
    }
}


.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12rpx 24rpx;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 28rpx;
    border-radius: 30rpx;
    cursor: pointer;
    border: 2rpx solid #fff;
    border-radius: 30rpx;
}
</style>
